<template>
  <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    :visible.sync="dialogVisible"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 表单区域 -->
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      :label-width="labelWidth"
      :label-position="labelPosition"
      @submit.native.prevent
    >
      <!-- 第一个输入框 -->
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入名称"
          clearable
        ></el-input>
      </el-form-item>
      
      <!-- 第二个输入框 -->
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="3"
          placeholder="请输入描述"
          clearable
        ></el-input>
      </el-form-item>
      
      <!-- 下拉框 -->
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="formData.type"
          placeholder="请选择类型"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'SimpleFormDialog',
  inheritAttrs: false,
  props: {
    // 控制对话框是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    // 是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    // 表单标签宽度
    labelWidth: {
      type: String,
      default: '100px'
    },
    // 表单标签位置
    labelPosition: {
      type: String,
      default: 'right'
    },
    // 下拉框选项
    typeOptions: {
      type: Array,
      default: () => [
        { value: 'type1', label: '类型一' },
        { value: 'type2', label: '类型二' },
        { value: 'type3', label: '类型三' }
      ]
    },
    // 初始表单数据
    initialFormData: {
      type: Object,
      default: () => ({
        name: '',
        description: '',
        type: ''
      })
    },
    // 确认按钮加载状态
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      formData: { ...this.initialFormData },
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal)
    },
    initialFormData: {
      handler(newVal) {
        this.formData = { ...newVal }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 处理打开事件
    handleOpen() {
      this.$emit('open')
      // 打开时重置表单数据
      this.resetForm()
    },
    // 处理关闭事件
    handleClose() {
      this.$emit('close')
    },
    // 处理取消事件
    handleCancel() {
      this.$emit('cancel')
      this.dialogVisible = false
    },
    // 处理确认事件
    handleConfirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('confirm', this.formData)
          // 如果父组件没有处理确认后的关闭操作，可以在这里自动关闭
          // this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.form && this.$refs.form.resetFields()
      this.formData = { ...this.initialFormData }
    },
    // 打开对话框
    open() {
      this.dialogVisible = true
    },
    // 关闭对话框
    close() {
      this.dialogVisible = false
    },
    // 获取表单数据
    getFormData() {
      return this.formData
    },
    // 设置表单数据
    setFormData(data) {
      this.formData = { ...this.formData, ...data }
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
